Skip to content

feat(paper-forms): progress bar on set-up pages#9767

Open
tutntut wants to merge 4 commits into
developfrom
form-setup-progress-bar-v1
Open

feat(paper-forms): progress bar on set-up pages#9767
tutntut wants to merge 4 commits into
developfrom
form-setup-progress-bar-v1

Conversation

@tutntut

@tutntut tutntut commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

Problem

The paper-tracking create-form set-up flow (behind enable-paper-tracking-set-up-page)
walks admins through several set-up pages, but gives no sense of how far along
they are. This adds a progress bar across those pages.

Solution

Adds a thin linear progress bar to the create-form modal, spanning the three
paper-tracking set-up pages in order: title → data-source question → secret key.
It fills proportionally as the admin advances.

  • Rendered in CreateFormModalContent, driven by the wizard's currentStep.
  • Appears only when enable-paper-tracking-set-up-page is on, so the
    non-flagged create-form flow is visually unchanged.
  • Exposes progressbar ARIA semantics (aria-valuenow/min/max, label) for accessibility.

This builds on develop's existing CreateFormModal wizard — no changes to the
flow, steps, or any other behaviour.

Screenshots

Page Before After
Title (step 1/3) before after
Data source (step 2/3) before after
Secret key (step 3/3) before after

Breaking Changes

No - backwards compatible. Purely additive UI, gated behind an existing flag.

Tests

Unit test added (CreateFormProgressBar.test.tsx): aria step reporting + proportional fill.

Manual:

TC1: Bar appears and advances (flag on)

  • Enable enable-paper-tracking-set-up-page
  • Open "Create form" → progress bar visible on the title step (~1/3)
  • Proceed to the data-source question → bar advances (~2/3)
  • Create the form → secret-key screen shows the bar full (3/3)

TC2: No change when flag off

  • With the flag off, open "Create form"
  • Confirm no progress bar appears and the flow is unchanged

@tutntut
tutntut force-pushed the form-setup-progress-bar-v1 branch from 82ecb7e to 0d3c1da Compare July 20, 2026 01:54
@tutntut tutntut changed the title feat(paper-forms): progress bar on set-up pages feat(paper-forms): guided create-form flow on set-up pages Jul 20, 2026
@tutntut tutntut changed the title feat(paper-forms): guided create-form flow on set-up pages feat(paper-forms): progress bar on set-up pages Jul 20, 2026
@tutntut
tutntut force-pushed the form-setup-progress-bar-v1 branch from 0d3c1da to 8bf66aa Compare July 20, 2026 02:15
tutntut and others added 2 commits July 20, 2026 05:15
Add a thin linear progress bar across the paper-tracking create-form
set-up pages (title -> data source -> secret key). It fills proportionally
as the admin advances, and is gated behind the paper-tracking flag so
other create-form flows are unaffected. Exposes progressbar aria
semantics for accessibility.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Round the track and fill corners, lighten the track (neutral.300 ->
neutral.200), and ease the fill transition, matching the workflow-v2
phase bar so the paper-tracking surfaces feel consistent.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@tutntut
tutntut force-pushed the form-setup-progress-bar-v1 branch from 9c186b4 to 21b60d6 Compare July 20, 2026 05:16
@tutntut

tutntut commented Jul 20, 2026

Copy link
Copy Markdown
Contributor Author

Getting @bookwormsuf to review first:

Comments:

  • ✅ Keep the simple horizontal progress bar
  • ✅ Review whether the sliding animation conflicts with the sticky progress bar
  • ⚔️ Review whether the legacy flow being left out is ok. [FIXED]

tutntut and others added 2 commits July 24, 2026 01:40
…[part 3]

Wrap the bar in the same centered 45rem container the set-up screens use,
with matching horizontal padding, so it spans from the "Set up your form"
header to the primary button rather than the full modal width.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…idth [part 4]

The Details page uses a 45rem content column but the data-source and
secret-key pages used 42.5rem, so content shifted between steps and the
progress bar only lined up on the first page. Standardise all three on
45rem so the column and the bar stay put across the wizard.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@tutntut
tutntut force-pushed the form-setup-progress-bar-v1 branch from 21b60d6 to f3fa1e7 Compare July 24, 2026 01:41
@tutntut
tutntut marked this pull request as ready for review July 24, 2026 02:11
@tutntut
tutntut requested a review from a team July 24, 2026 02:11
@endor-labs-pro

Copy link
Copy Markdown

Warning

Endor Labs detected 1 policy violations associated with this pull request.

Please review the findings that caused the policy violations.

📋 Policy: PR Warn (6 findings)

📥 Package npm://formsg-backend@8.2.0

⤵️ Dependency: npm://ip@1.1.9
🚩 GHSA-2p57-rm9w-gvfp: ip SSRF improper categorization in isPublic

Details

  • Severity: High
  • Tags: Direct Normal Reachable Dependency Reachable Function Unfixable Warning
  • Categories: SCA Vulnerability Security
  • Remediation: No patch upgrades available to fix the issue. Check the security advisory for alternative controls or actions.
⤵️ Dependency: npm://uuid@8.0.0
🚩 CVE-2026-41988: uuid before 14.0.0 can make unexpected writes when external output buffers are used, and the UUID version is 3, 5, or 6.

Details

  • Severity: High
  • Tags: Transitive Normal Reachable Dependency Reachable Function Fix Available Warning
  • Categories: SCA Vulnerability Security
  • Remediation: No newer versions of aws-sdk (current: 2.1692.0, latest: 4.38.4) require uuid 11.1.1 or higher. Consider other options to upgrade uuid to 11.1.1 (current: 8.0.0, latest: 14.0.1).
⤵️ Dependency: npm://uuid@8.3.2
🚩 CVE-2026-41988: uuid before 14.0.0 can make unexpected writes when external output buffers are used, and the UUID version is 3, 5, or 6.

Details

  • Severity: High
  • Tags: Transitive Normal Reachable Dependency Reachable Function Fix Available Warning
  • Categories: SCA Vulnerability Security
  • Remediation: No newer versions of @azure/msal-node (current: 5.0.2, latest: 5.4.2) require uuid 11.1.1 or higher. Consider other options to upgrade uuid to 11.1.1 (current: 8.3.2, latest: 14.0.1).
⤵️ Dependency: npm://ws@8.17.1
🚩 GHSA-58qx-3vcg-4xpx: ws: Uninitialized memory disclosure

Details

  • Severity: Medium
  • Tags: Transitive Normal Reachable Dependency Reachable Function Fix Available Warning
  • Categories: SCA Vulnerability Security
  • Remediation: Check if you can use a newer version of react-email (current: 4.0.15, latest: 6.9.0) that requires ws 8.20.1 or higher (current: 8.17.1, latest: 8.21.1). See for example react-email@6.1.1 (ws@8.20.1), react-email@6.1.4 (ws@8.20.1), react-email@6.1.5 (ws@8.20.1), or latest version react-email@6.9.0 (ws@8.21.1).
⤵️ Dependency: npm://ws@8.19.0
🚩 GHSA-58qx-3vcg-4xpx: ws: Uninitialized memory disclosure

Details

  • Severity: Medium
  • Tags: Transitive Normal Reachable Dependency Reachable Function Fix Available Warning
  • Categories: SCA Vulnerability Security
  • Remediation: Upgrade ws to version 8.20.1 (current: 8.19.0, latest: 8.21.1).

📥 Package npm://formsg-pdf-gen-sparticuz@8.2.0

⤵️ Dependency: npm://ws@8.19.0
🚩 GHSA-58qx-3vcg-4xpx: ws: Uninitialized memory disclosure

Details

  • Severity: Medium
  • Tags: Transitive Normal Reachable Dependency Reachable Function Fix Available Warning
  • Categories: SCA Vulnerability Security
  • Remediation: Check if you can use a newer version of puppeteer-core (current: 24.16.1, latest: 25.3.0) that requires ws 8.20.1 or higher (current: 8.19.0, latest: 8.21.1). See for example puppeteer-core@25.0.2 (ws@8.20.1), puppeteer-core@25.0.4 (ws@8.20.1), puppeteer-core@25.0.3 (ws@8.21.0), or latest version puppeteer-core@25.3.0 (ws@8.21.0).

This comment was automatically generated by Endor Labs.
Scanned @ 07-24-2026 02:15:55 UTC

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants